<template>
  <el-form :model="data" label-width="auto" ref="ruleFormRef">
    <slot :form="data" />
    <div class="flex-center-center list-r-8" v-if="btns">
      <template v-for="item in btns">
        <template v-if="item.options && Array.isArray(item.options)">
          <PopoverTabel :width="600" placement="top" :thead="[
            {
              label: '参数名称',
              prop: 'label',
              align: 'left',
              width: null,
            },
            {
              label: '参数值',
              prop: 'value',
              align: 'left',
              width: null,
              formType: 'copy',
            },
          ]" :tbody="item.options">
            <el-button :type="item.type" :icon="item.icon"
              :disabled="typeof item.disabled === 'function' ? item.disabled(data) : item.disabled"
              @click="saveBtn(item)">
              {{ item.title }}
            </el-button>
          </PopoverTabel>
        </template>
        <template v-else>
          <el-button :type="item.type" :icon="item.icon"
            :disabled="typeof item.disabled === 'function' ? item.disabled(data) : item.disabled"
            @click="saveBtn(item)">
            {{ item.title }}
          </el-button>
        </template>
      </template>
    </div>
  </el-form>
</template>
<script setup lang="ts">
//获取父级数据
const props = withDefaults(
  defineProps<{
    data?: any;
    btns?: any;
  }>(),
  {},
);
const emit = defineEmits<{
  //fn为父组件引入子组件是定义的子组件事件属性，可随意定义
  (event: 'copyBtn'): void;
}>();
const ruleFormRef: any = ref(null);
const saveBtn = async (item: any, formEl: any = ruleFormRef.value) => {
  if (!formEl || !item.isRules) {
    _sun();
    return
  };
  await formEl.validate(async (valid: any) => {
    if (valid) {
      _sun();
    }
  });
  function _sun() {
    if (typeof item.click === 'function') {
      item.click(props.data, () => {
        resetForm()
      });
    }
  }
};
const resetForm = (formEl: any = ruleFormRef.value) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>
<style scoped></style>
